@import '../../../themes/mixins/loading-spinner';
@import '../../../themes/mixins/error-message';

.dialog {
  font-family: var(--font-light);

  .spendingPasswordFields {
    transition: all 400ms ease;

    .newPassword,
    .currentPassword {
      margin-bottom: 20px;
      width: 100%;
    }

    .passwordInstructions {
      color: var(--theme-dialog-text-color);
      font-family: var(--font-light);
      line-height: 1.38;
      margin-top: 10px;
    }

    .spendingPasswordField {
      display: flex;
      position: relative;

      > span {
        height: 12px;
        left: 158px;
        outline: none;
        position: absolute;
        top: 3px;
        width: 12px;
      }

      &.jpLangTooltipIcon {
        > span {
          left: 134px !important;
        }
      }

      .currentPassword + span {
        left: 145px !important;
      }

      &.jpLangTooltipIcon {
        .currentPassword + span {
          left: 135px !important;
        }
      }

      :global .PasswordInput_root {
        width: 100%;
      }

      .infoIcon {
        height: 14px;
        opacity: 0.4;
        transform: translateY(2px);
        width: 14px;

        &:hover {
          opacity: 0.8;
        }

        path {
          fill: var(--theme-input-label-color);
        }
      }

      :global .PasswordInput_root.spendingPassword,
      :global .PasswordInput_root.repeatedPassword {
        width: 100%;
      }
    }
  }

  .repeatedPassword {
    width: 100%;
  }

  .error {
    @include error-message;
    margin-top: 27px;
    text-align: center;
  }
}

.isSubmitting {
  box-shadow: none !important;
  @include loading-spinner('../../../assets/images/spinner-light.svg');
}
